<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书城首页</title>
</head>
<%--静态包含base标签，css样式--%>
<%@include file="/pages/common/header.jsp" %>
<script type="text/javascript">
    $(function () {
        // 点击"加入购物车"按钮后获取到当前图书的id并跳转至CartServlet添加购物车方法(ajax方式)
        $("button.addCartBtn").click(function () {
            let pageBookId = $(this).attr("pageBookId");
            $.getJSON("cartServlet", "action=ajaxAddCart&pageBookId=" + pageBookId, function (jsonData) {
                $("#totalCountSpan").text("您的购物车中有" + jsonData.totalCount + "件商品");
                $("span.lastGoodsSpan").text("【" + jsonData.lastGoods + "】");
            })
        })
    })
</script>
<body>
<div id="header">
    <img class="logo_img" alt="" src="static/img/logo.png">
    <span class="wel_word">网上书城</span>
    <div>
        <c:if test="${empty sessionScope.user}">
            <a href="pages/user/login.jsp">登录</a> |
            <a href="pages/user/register.jsp">注册</a> &nbsp;&nbsp;
            <a href="pages/cart/cart.jsp">购物车</a>
            <a href="pages/manager/manager.jsp">后台管理</a>
        </c:if>
        <c:if test="${not empty sessionScope.user}">
            <span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临新华书城</span>
            <a href="pages/cart/cart.jsp">购物车</a>
            <a href="pages/manager/manager.jsp">后台管理</a>
        </c:if>
    </div>
</div>
<div id="main">
    <div id="book">
        <div class="book_cond">
            <form action="client/bookServlet" method="get">
                <input type="hidden" name="action" value="pricePage">
                价格：<input id="min" type="text" name="min" value="${param.min}"> 元 -
                <input id="max" type="text" name="max" value="${param.max}"> 元
                <input type="submit" value="查询"/>
            </form>
        </div>
        <div style="text-align: center">
            <%--购物车不为空显示以下内容--%>
            <c:if test="${not empty sessionScope.cart.cartGoods}">
                <span id="totalCountSpan">您的购物车中有${sessionScope.cart.totalCount}件商品</span>
                <div>
                    您刚刚将<span class="lastGoodsSpan" style="color: red">【${sessionScope.lastGoods}】</span>加入到了购物车中
                </div>
            </c:if>
            <%--购物车为空则显示以下内容--%>
            <c:if test="${empty sessionScope.cart.cartGoods}">
                <%--此处购物车商品为空时仍然将商品总数量和商品名称标签放在此处是为了解决：
                第一次访问页面或清空购物车回到主页面后，此时购物车中的商品为空，在往购物车添加商品时由于使用的ajax异步刷新技术
                导致没有刷新整体页面，此时session中的商品仍然判断为空，所以不能及时显示商品总数和商品名称的问题--%>
                <span id="totalCountSpan"></span>
                <div>
                        <%--此处将class与上面商品名称标签class相同，可以覆盖原文本内容，代替正常显示商品名称--%>
                    <span class="lastGoodsSpan" style="color: red">购物车空空如也</span>
                </div>
            </c:if>
        </div>
        <c:forEach items="${requestScope.pageBook.items}" var="pageBook">
            <div class="b_list">
                <div class="img_div">
                    <img class="book_img" alt="" src="${pageBook.imgPath}"/>
                </div>
                <div class="book_info">
                    <div class="book_name">
                        <span class="sp1">书名:</span>
                        <span class="sp2">${pageBook.name}</span>
                    </div>
                    <div class="book_author">
                        <span class="sp1">作者:</span>
                        <span class="sp2">${pageBook.author}</span>
                    </div>
                    <div class="book_price">
                        <span class="sp1">价格:</span>
                        <span class="sp2">${pageBook.price}</span>
                    </div>
                    <div class="book_sales">
                        <span class="sp1">销量:</span>
                        <span class="sp2">${pageBook.sales}</span>
                    </div>
                    <div class="book_amount">
                        <span class="sp1">库存:</span>
                        <span class="sp2">${pageBook.stock}</span>
                    </div>
                    <div class="book_add">
                        <button pageBookId="${pageBook.id}" class="addCartBtn">加入购物车</button>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
    <%--静态包含分页导航条--%>
    <%@include file="/pages/common/page_pilot.jsp" %>
</div>

<%--静态包含页脚信息--%>
<%@include file="/pages/common/footer.jsp" %>
</body>
</html>